<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myheader</title>
  <link rel="stylesheet" href="../../public/css/bootstrap.min.css">
  <script src="../../public/js/jquery-3.4.1.min.js"></script>
  <script src="../../public/js/bootstrap.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    /* 头部定义 */
    .header {
      width: 100%;
      min-width: 1200px;
      /* height: 30px; */
      
      line-height: 30px;
      font-size: 12px;
    }
    .header-top{
      height: 30px;
      background-color: #dddddd;
    }
    /* 头部顶部部分 */
    .header-top,
    .header-bot {
      margin: 0 39px 0 39px;

    }

    .header-top p span {
      font-size: 12px;
      font-family: "微软雅黑";
      margin-left: 20px;
      cursor: pointer;

    }

    .header-top p span:hover:not(.nohover) {
      color: #CC1F3A;
      cursor: pointer;

    }

    p {
      margin-bottom: 0px;
    }

    /* 头部下部重要部分 */
    .header-bot-info h1 img {
      margin: 37px 19px 37px 19px;
      vertical-align: middle;
    }

    /* logo部分 */
    .home-logo {
      width: 204px;
      height: 134px;
      position: relative;
      margin-right: 100px;
      float: left;
    }

    /* 搜索部分 */
    .search {
      margin-right: 30px;
    }

    .btn-light {
      background-color: #DDDDDD;
    }

    .btn-danger,
    .btn-light {
      border-radius: 5px 5px 0 0;
      width: 30px;
    }

    /* 搜索栏 */
    #input-searh {
      height: 44px;
      width: 568px;
      border: 1px solid #d61a39;
      border-radius: 3px;
      padding-left: 35px;
      outline: none;
      margin-top: 45px;
      vertical-align: middle;
    }

    #input-searh:hover {
      border-color: black;
    }

    .goods-sto {
      top: 21px;
    }

    .goods-sto span {
      cursor: pointer;
    }

    .home-search-logo {
      position: absolute;
      top: 60px;
      left: 20px;
      width: 15px;
      height: 15px;
    }

    .button-search {
      width: 100px;
      height: 43px;
      border: 0;
      line-height: 43px;
      background: #d61a39;
      position: absolute;
      top: 45px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      right: 0;
      color: white;
      font-size: 16px;
      font-weight: 600;
      outline: none;
    }

    /* app下载部分 */
    .app-load {
      width: 90px;
      height: 120px;
      margin-top: 14px;
      background: #d61a39;
      background: linear-gradient(top, #d61a39, #F35A4A);
      border-radius: 3px;
      float: left;
      cursor: pointer;
      margin-left: 140px;
    }

    .app-load>p:first-child {
      width: 90px;
      margin-top: 3px;
      text-align: center;
      color: white;
      margin-bottom: -5px;
      line-height: 18px;
    }

    .app-load>p:nth-child(2) {
      display: inline-block;
      width: 170px !important;
      margin-top: -5px;
      text-align: center;
      color: white;
      transform: scale(0.6);
      font-size: 14px;
      margin-left: -40px;
      overflow: hidden;

    }

    .app-load>img {
      width: 80px;
      height: 80px;
      margin-top: -15px;
      margin-left: 5px;
    }
  </style>
</head>

<body>
  <header class="header">
    <!-- 头部个人部分 -->
    <div class="header-top d-flex justify-content-between ">
      <p>
        <span style="cursor: default;">欢迎您来到易网聚鲜！</span>
        <span>【登陆】</span>
        <span>快速注册</span>
      </p>
      <p>
        <span>商城首页</span>
        <span>卖家中心</span>
        <span>个人中心</span>
        <span>我的订单</span>
        <span>成长中心</span>
        <span style="cursor: default;">语言：
          <select name="language" id="">
            <option value="cn">中文</option>
            <option value="en">英文</option>
          </select>
        </span>
      </p>
    </div>
    <!-- 头部，搜索，购物车 app下载 -->
    <div class="header-bot">
      <div class="header-bot-info d-flex justify-content-around">
        <!-- logo -->
        <h1>
          <a href="https://www.ewfresh.com/i/homePage/home.html?token=null&uid=null" class="home-logo">
            <img src="../../public/img/myheader/logo.png" alt=""></a>
        </h1>
        <!-- 搜索 -->
        <div class="search position-relative">
          <div class="position-absolute goods-sto">
            <span class="btn-danger">商品</span>
            <span class="btn-light">店铺</span>
          </div>
          <input type="text" name="" id="input-searh" placeholder="请输入要查询的商品">
          <img src="../../public/img/myheader/search.png" alt="" class="home-search-logo">
          <button class="button-search">搜索</button>
        </div>
        <!-- app下载 -->
        <div class="app-load">
          <p>下载APP</p>
          <p>登录注册,享更多优惠</p>
          <img src="../../public/img/myheader/image.png" alt="" class="">
        </div>
      </div>
    </div>
  </header>
</body>

</html>